<html><head>
<style>
h1 {
	margin: 0;
}
#stage td {
	width: 20px;
	height: 20px;
	border: 1px solid #ccc;
}
</style>

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jsSO.js"></script>

<script type="text/javascript">

jsSO.connect('rtmp://pro-web.at/SOSample', 'draw');

// select color
var rand = Math.round(Math.random()*100000)%4;
var color = (['blue', 'red', 'green', 'yellow'])[rand];

// handle stage pixel updates
jsSO.onSync(function(event, updates, data) {
	for (pixel in updates) {
		if (pixel.match(/^stagepixel_/)) {
			$('#'+pixel).css('backgroundColor', data[pixel]);
		}
	}
});

$(function(){
	// build game stage
	$GameStage = $('<div></div>').appendTo('body');
	$GameStage.append('<h1>You are: '+color+'</h1>');
	var html = '';
	for (var y=0; y<20; y++) {
		html += '<tr>';
		for (var x=0; x<20; x++) {
			html += '<td id="stagepixel_'+x+'_'+y+'" x='+x+' y='+y+'>&nbsp;</td>';
		}
		html += '</tr>';
	}
	$GameStage.append('<table id="stage">'+html+'</table>');
});

// stage mouse over event
$('#stage td').live('mouseover', function(){
	var $this = $(this);
	// set local pixel color
	$this.css('backgroundColor', color);
	
	// set global pixel color
	jsSO.set(['stagepixel',$this.attr('x'),$this.attr('y')].join('_'), color);
});

</script>

</head><body></body></html>
